<template>
  <div>
    <h1>树形组件的使用</h1>
    <!--
      data: 传入需要渲染的数据
      label: 值就是渲染到浏览器中的数据
      children：所有的字节点需要通过children进行渲染

      props: 用于修改一些默认值
        label: 可以通过这个属性把默认的渲染的属性名改为其他名字

      default-expand-all: 是否默认展开所有节点, true表示展开
     -->
    <el-tree :data="treeData" :props="{label: 'name'}" default-expand-all>
      <!--
        v-slot="{data}"指令里面的data是tree组件通过作用域插槽
        传递给我们使用的，data名字是tree组件规定的，不能随便写的。
        那我们如何知道tree组件传了data给我们呢？
        答：看tree组件的文档  -->
      <template v-slot="{data}">
        <!-- {{ data }} -->
        <el-row
          type="flex"
          justify="space-between"
          style="width: 100%;"
        >
          <el-col>
            <span>{{ data.name }}</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex" justify="end">
              <el-col>
                <span>{{ data.manager }}</span>
              </el-col>
              <el-col>
                <el-dropdown>
                  <span>操作
                    <i class="el-icon-arrow-down" />
                  </span>
                  <!-- 下拉内容 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          name: '总裁办',
          manager: '管理员'
        }, {
          name: '技术部',
          manager: '小明',
          children: [
            {
              name: '前端研发部',
              manager: '小芳'
            },
            {
              name: 'java研发部',
              manager: '尤玉玺'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>

</style>
